<template>
  <div>
    <!-- search start -->
    <search-bar placeHolder=" 请输入用户姓名"
                @handleSearch="init" />
    <!-- search end -->

    <!-- 推荐表格数据 -->
    <div class="box">
      <v-table :tableData="tableData.list"
               :tableLabel="tableLabel"
               v-loading="loading"
               @togglePublic="togglePublic" />
      <!-- 推荐表格分页器 -->
      <ubi-paging :page.sync="page"
                  :pageSize.sync="pageSize"
                  style="position:absolute;bottom:0;"
                  :pageCount="tableData.rows" />
    </div>
    <!--  直推人数、间推人数、直推奖励、间推奖励  共用一个弹框 -->
    <el-dialog title="详情"
               :visible.sync="isShowPublicDialog"
               v-el-drag-dialog
               center
               @close="handlePublicDialogClose">
      <v-table :tableData="publicData.data"
               :tableLabel="publicLabel"
               :border="true"
               :height="0" />
      <ubi-paging :page.sync='publicPage'
                  :pageCount="publicData.last_page" />
    </el-dialog>
  </div>
</template>

<script>

import ubiPaging from '@/views/UBI/common/ubi-data-pagination'
export default {
  name: "userArningList",
  components: {
    ubiPaging,
  },
  data () {
    return {
      tableData: [], //推荐表格数据
      tableLabel: [
        {
          label: '用户姓名',
          prop: 'name'
        },
        {
          label: '用户电话',
          prop: 'phone'
        },
        {
          label: '直推人数',
          prop: 'zhi_num',
          key: 'ztNum',
          methodName: 'togglePublic'
        },
        {
          label: '间推人数',
          prop: 'jian_num',
          key: 'jtNum',
          methodName: 'togglePublic'
        },
        {
          label: '直推奖励',
          prop: 'zhi_money',
          key: 'ztmoney',
          methodName: 'togglePublic'
        },
        {
          label: '间推奖励',
          prop: 'jian_money',
          key: 'jtmoney',
          methodName: 'togglePublic'
        },
        {
          label: '推广油站',
          prop: 'oil_money',
          key: 'tgoil',
          methodName: 'togglePublic'
        },
        {
          label: '推广运营商奖励',
          prop: 'agent_money',
          key: 'tgort',
          methodName: 'togglePublic'
        },
        {
          label: '推广维修厂奖励',
          prop: 'shop_money',
          key: 'thshop',
          methodName: 'togglePublic'
        }
      ], //腿甲表格数据对应的标题
      page: 1, //当前页
      pageSize: 8, //每页显示多少条数据\
      searchkey: '',
      gra: {},
      isShowPublicDialog: false, //公共弹框默认隐藏
      publicData: [], //公共弹框数据
      publicLabel: [], // //公共弹框数据对应的标题
      publicPage: 1, //公共弹框数据当前页
      publicPageSize: 6, //公共弹框每页显示多少条数据
      publicKey: '', //区分调用接口
      publicUid: '',//保存调用接口的UID
      straightPersonNumLable: [ //直推人数弹框数据对应的标题
        {
          label: '用户姓名',
          prop: 'name'
        },
        {
          label: '用户电话',
          prop: 'phone'
        },
        {
          label: '推荐时间',
          prop: 'create_time'
        }
      ],
      straightRewards: [ //直推奖励弹框数据对应的标题
        {
          label: '用户姓名',
          prop: 'name'
        },
        {
          label: '用户电话',
          prop: 'phone'
        },
        {
          label: '推荐奖励',
          prop: 'money'
        },
        {
          label: '推荐时间',
          prop: 'create_time'
        }
      ],
      gapPersonNum: [ //间推人数弹框数据对应的标题
        {
          label: '用户姓名',
          prop: 'name'
        },
        {
          label: '用户电话',
          prop: 'phone'
        },
        {
          label: '直推人',
          prop: 'income_dir',
          childrenData: 'name'
        },
        {
          label: '推荐时间',
          prop: 'create_time'
        }
      ],
      gapRewards: [ //间推奖励弹框数据对应的标题
        {
          label: '用户姓名',
          prop: 'name'
        },
        {
          label: '用户电话',
          prop: 'phone'
        },
        {
          label: '推荐奖励',
          prop: 'money'
        },
        {
          label: '推荐时间',
          prop: 'create_time'
        }
      ],
      spreadOil: [ //推广油站弹框数据对应的标题
        {
          label: '用户',
          prop: 'oil_leader'
        },
        {
          label: '手机号',
          prop: 'leader_phone'
        },
        {
          label: '奖励金额',
          prop: 'money'
        },
        {
          label: '时间',
          prop: 'create_time'
        }
      ],
      spreadOperator: [ //推广运营商弹框数据对应的标题
        {
          label: '运营商名称',
          prop: 'company'
        },
        {
          label: '奖励金额',
          prop: 'money'
        },
        {
          label: '时间',
          prop: 'create_time'
        }
      ],
      spreadShop: [ //推广维修厂奖励弹框数据对应的标题
        {
          label: '维修厂名称',
          prop: 'company'
        },
        {
          label: '奖励金额',
          prop: 'money'
        },
        {
          label: '时间',
          prop: 'create_time'
        }
      ],
      loading: false
    }
  },
  methods: {
    async init (search = this.searchkey) {  //页面初始化渲染数据
      this.loading = true;
      const paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize});
      let res = await this.api.userArning(paramsStr).then(res => res);
      this.tableData = res.data;
      this.loading = false;
    },
    async togglePublic (key = this.publicKey, rowData = this.publicUid) {
      this.isShowPublicDialog = true;
      this.publicData = [];
      this.publicLabel = [];
      if (key) {
        this.publicKey = key;
        this.publicUid = rowData;
      }
      if (key == 'ztNum') { //直推人数接口调用
        this.publicLabel = this.straightPersonNumLable;
        let res = await this.api.straightPersonNumLable({ u_id: rowData.u_id, page: this.publicPage }).then(res => res)
        this.publicData = res.data;
      } else if (key == 'jtNum') { //间推人数接口调用
        this.publicLabel = this.gapPersonNum;
        let res = await this.api.gapPersonNum({ u_id: rowData.u_id, page: this.publicPage }).then(res => res)
        this.publicData = res.data;
      } else if (key == 'ztmoney') {//直推奖励
        this.publicLabel = this.straightRewards;
        let res = await this.api.straightPersonNumLable({ u_id: rowData.u_id, page: this.publicPage }).then(res => res)
        this.publicData = res.data;
      } else if (key == 'jtmoney') {//间推奖励
        this.publicLabel = this.gapRewards;
        let res = await this.api.gapPersonNum({ u_id: rowData.u_id, page: this.publicPage }).then(res => res)
        this.publicData = res.data;
      } else if (key == 'tgoil') {//推广油站接口调用
        this.publicLabel = this.spreadOil;
        let res = await this.api.spreadOil({ unionId: rowData.unionId, page: this.publicPage }).then(res => res)
        this.publicData = res;
      } else if (key == 'tgort') {//推广运营商奖励
        this.publicLabel = this.spreadOperator;
        let res = await this.api.spreadOperator({ unionId: rowData.unionId, page: this.publicPage }).then(res => res)
        this.publicData = res;
      } else if (key == 'thshop') {//推广维修厂奖励
        this.publicLabel = this.spreadShop;
        let res = await this.api.spreadShop({ unionId: rowData.unionId, page: this.publicPage }).then(res => res)
        this.publicData = res;
      }
    },
    handlePublicDialogClose () {
      this.publicPage = 1;
      this.publicPageSize = 8;
    }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    },
    publicPage () {
      this.togglePublic()
    }
  },
  mounted () {
    this.init();
  }
}
</script>

<style scoped>
.box {
  min-height:81vh;
  position:relative;
  padding-bottom:40px;
  box-sizing:border-box;
}
</style>
